<!--  -->
<template>
  <div class="home">
    <van-nav-bar title="安心修大会员" fixed class="nav_bar" safe-area-inset-top>
      <template #right>
        <div class="btns">
          <van-image
            class="btn_1"
            :src="require('@/assets/icon/common/kefu.png')"
            @click="goChat"
          />
        </div>
      </template>
    </van-nav-bar>
    <div class="vip_type">
      <van-swipe :loop="false" :width="width" :show-indicators="false">
        <van-swipe-item v-for="item in 1" :key="item">
          <template v-if="!userData.isVip">
            <div class="vip_item">
              <div class="top">
                <div class="vip_name">{{ vipInfo.goodsName }}</div>
                <div class="rule" @click="showRoule">规则</div>
              </div>
              <div class="discount">
                <van-image
                  class="icon"
                  :src="require('@/assets/icon/common/vip_2.png')"
                />
                <span class="text_2">
                  <span>尊享</span>
                  <span class="num_2">10大权益</span></span
                >
              </div>
              <div class="price">
                <div class="text_3">¥</div>
                <div class="price_num">{{ vipInfo.price }}</div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="vip_item isVip">
              <div class="top">
                <div class="user_info">
                  <div class="avatar">
                    <van-image
                      round
                      width="1.34rem"
                      height="1.34rem"
                      :src="userData.avatar"
                    />
                    <div class="vip_tag">
                      <van-image
                        round
                        width="0.26rem"
                        height="0.26rem"
                        :src="require('@/assets/icon/common/vip_2.png')"
                      />
                      <div style="margin-left: 0.1rem">vip</div>
                    </div>
                  </div>
                  <div class="user_name">{{ userData.userName }}</div>
                </div>
                <div class="rule" @click="showRoule">规则</div>
              </div>
              <div class="vip_time">{{ vip_time }}到期</div>
            </div>
          </template>
        </van-swipe-item>
      </van-swipe>
      <div v-if="!userData.isVip" class="mask"></div>
    </div>
    <div class="vip_power">
      <div class="power_title">尊享会员权益</div>
      <div class="power_icon">
        <div
          v-for="(item, index) in vip_label"
          :key="index"
          class="power_icon_item"
        >
          <div class="pic">
            <van-image
              class="pic_icon"
              :src="require(`@/assets/icon/vip/${index}.png`)"
            />
          </div>
          <span class="label">{{ item }}</span>
        </div>
      </div>
    </div>
    <div v-if="!userData.isVip" class="store">
      <div class="top">
        <div class="label">适用门店</div>
        <div class="all" @click="jump">全部></div>
      </div>
      <div class="list">
        <storeListItem
          v-for="(v, i) in list"
          :key="i"
          :item="v"
        ></storeListItem>
      </div>
    </div>
    <div v-show="init" class="vip_power choujiang">
      <div class="power_title t2">安心修会员大抽奖</div>
      <div class="choujiang_box">
        <div class="wheel_content">
          <LuckyWheel
            ref="myLucky"
            width="6.9rem"
            height="6.9rem"
            :blocks="blocks"
            :prizes="prizes"
            :buttons="buttons"
            :default-config="defaultConfig"
            @start="startCallback"
            @end="endCallback"
          ></LuckyWheel>
        </div>
      </div>
      <div class="roules">
        <div class="roules_title">抽奖规则：</div>
        <!-- <p class="first_p">
          {{ prizeInfo.activeRule }}
        </p> -->
        <van-field
          v-model="priceConfigInfo.activeRule"
          type="textarea"
          :autosize="{
            minHeight: 200,
          }"
          readonly
        />
      </div>
    </div>
    <div v-if="!userData.isVip" class="bottom">
      <div class="btn_outside">
        <div class="btn_inside">
          <div class="left">
            <span class="text_1">￥</span>
            <span class="text_2">{{ vipInfo.price }}</span>
            <span class="text_1">/年</span>
          </div>
          <div class="right" @click="goOrder">
            <div class="text_3">立即开通></div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" round>
      <div class="rules_content">
        <span class="close" @click="show = false">
          <van-icon name="cross" size="20" color="#000" />
        </span>
        <div class="rules_imgs">
          <img
            src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/0d0b6b7160cf2678eb7a0dfab313a367.jpg"
            alt=""
          />
          <img
            src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/d32b1d2186649aaeaf7429c69232f415.jpg"
            alt=""
          />
          <img
            src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/67e6a41fe0e418759bde2eb95f26aafd.jpg"
            alt=""
          />
          <img
            src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/2e44d67294e41026c0e2ce71f7aacd72.jpg"
            alt=""
          />
          <img
            src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/a6e0495ac05a07746f2dd6a08fd89e4f.jpg"
            alt=""
          />
        </div>
      </div>
    </van-popup>
    <van-dialog
      v-model="showResult"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <div class="pic" @click="clickPriceResult">
        <img
          :src="
            hasRecord
              ? require('@/assets/icon/vip/has-gift.png')
              : require('@/assets/icon/vip/no-gift.png')
          "
        />
        <div class="gift_result">
          <template v-if="hasRecord">
            <p>恭喜你</p>
            <p>抽到{{ priceResult.prizeName }}</p>
          </template>
          <!-- <template v-else>
            <p>很遗憾</p>
            <p>这次没有中</p>
            <p>下个月再来试试吧</p>
          </template> -->
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import storeListItem from "@/components/store/storeListItem.vue";
import api from "@/api/api";
import { mapGetters } from "vuex";
import { formatTime } from "@/utils/common";
import { Toast } from "vant";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "vip",
  components: { storeListItem },
  data() {
    //这里存放数据
    return {
      show: false,
      vip_label: [
        "免费洗车",
        "工时8折",
        "每月抽奖",
        "5折钢圈修复",
        "免费 24 项检测",
        "免费加玻璃水",
        "8折补胎",
        "免费刹车油保养",
        "8折美容",
        "全合成机油保养",
      ],
      list: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 4,
      },
      finished: false,
      vipInfo: {},
      wheelInfo: {
        width: 0,
        height: 0,
      },
      blocks: [{ padding: 0, background: "transparent" }],
      prizes: [],
      defaultConfig: {
        gutter: "0.1rem",
      },
      buttons: [],
      showResult: false,
      priceConfigInfo: {},
      prizeList: [],
      priceNum: 0,
      init: false,
      priceResult: {},
      hasRecord: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    width() {
      return (
        Math.max(document.documentElement.clientWidth, window.innerWidth || 0) *
        0.9
      );
    },
    vip_time() {
      return formatTime(this.userData.vip_end, "yyyy年MM月dd日");
    },
    ...mapGetters(["userData"]),
  },
  //监控data中的数据变化
  watch: {
    priceNum(newVal, oldVal) {
      if (newVal <= 0) {
        setTimeout(() => {
          this.buttons[0].imgs[0].src = require("@/assets/icon/vip/cjbrn-inactive.png");
        }, 1500);
      }
    },
  },
  //方法集合
  methods: {
    jump() {
      this.$router.push({
        path: "/allVipUse",
      });
    },
    generatePriceItem() {
      this.prizeList.forEach((item) => {
        this.prizes.push({
          background: "#feebca",
          fonts: [
            {
              text: item.title,
              lengthLimit: "50%",
              fontColor: "#c5241a",
              fontWeight: "600",
              top: "0.3rem",
              id: item.id,
            },
          ],
        });
      });
      this.prizes.push({
        background: "#feebca",
        fonts: [
          {
            text: "谢谢惠顾",
            lengthLimit: "50%",
            fontColor: "#c5241a",
            fontWeight: "600",
            top: "0.3rem",
            id: 0,
          },
        ],
      });
    },
    generateBtn() {
      if (this.priceNum == 0) {
        this.buttons = [
          {
            radius: "2.2rem",
            imgs: [
              {
                src: require("@/assets/icon/vip/cjbrn-inactive.png"),
                width: "2.2rem",
                height: "2.85rem",
                top: "-1.8rem",
              },
            ],
          },
        ];
      } else {
        this.buttons = [
          {
            radius: "2.2rem",
            imgs: [
              {
                src: require("@/assets/icon/vip/cjbtn.png"),
                width: "2.2rem",
                height: "2.85rem",
                top: "-1.8rem",
              },
            ],
          },
        ];
      }
    },
    goChat() {
      this.$router.push({
        path: "/customer",
      });
    },
    goOrder() {
      this.$router.push({
        path: "/confirmVipOrder",
        query: {
          goodsId: this.vipInfo.goodsId,
          num: 1,
          skuId: this.vipInfo.id,
        },
      });
    },
    async getPriceCount() {
      let res = await api.getPersonalResidueNum({
        rollPrizeId: "1958337070718459906",
      });
      // this.prizeInfo = res;
      this.priceNum = res;
    },
    showRoule() {
      this.show = true;
    },
    clickPriceResult() {
      this.showResult = false;
      if (this.hasRecord) {
        this.$router.push({
          path: "/coupon",
        });
      }
    },
    async getStoreList() {
      api.getStoreList(this.pageInfo).then((res) => {
        if (res.length == 0) this.finished = true;
        this.list = [...this.list, ...res].filter((v, i) => i < 4);
      });
    },
    async getVipInfo() {
      let res = await api.getGoodsinfo({
        goodsId: "1952191044194463746",
      });
      this.vipInfo = res.goodsSkuShowVo;
    },
    async getPriceConfigInfo() {
      let res = await api.getRollPrizeConfig({
        rollPrizeId: "1958337070718459906",
      });
      this.priceConfigInfo = res;
    },
    async getPriceList() {
      let res = await api.getPriceList({
        rollPrizeId: "1958337070718459906",
      });
      this.prizeList = res;
    },
    async startCallback() {
      if (this.priceNum == 0) {
        Toast("本月的抽奖次数已经用完");
        return;
      }
      this.$refs.myLucky.play();
      let res = await api
        .extractRollPrize({
          id: "1958337070718459906",
        })
        .catch(() => {
          const index = 3;
          this.$refs.myLucky.stop(index);
        });
      this.priceNum--;
      let index = 1;
      if (Object.keys(res.data).length == 0) {
        index = 3;
        this.hasRecord = false;
      } else if (res.data.prizeInfo.type != 4) {
        index = this.prizeList.findIndex(
          (item) => item.id == res.data.prizeInfo.prizeId
        );
        this.priceResult = res.data.prizeInfo;
        this.hasRecord = true;
      }
      this.$refs.myLucky.stop(index);

      // setTimeout(() => {
      //   const index = 0;
      //   this.$refs.myLucky.stop(index);
      // }, 4000);
    },
    endCallback(prize) {
      console.log("抽奖结果: ", prize);
      this.showResult = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    if (!this.userData.isVip) {
      this.getStoreList();
      this.getVipInfo();
    } else {
      await this.getVipInfo();
      await this.getPriceCount();
      await this.getPriceConfigInfo();
      await this.getPriceList();
      this.generatePriceItem();
      this.generateBtn();
      this.init = true;
      this.$refs.myLucky.init();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/04/25/da9e8a0e35e424fa5ea73657b9b08d0e.png")
    no-repeat;
  background-attachment: scroll;
  background-size: cover;
  background-position: top center;
  padding: 150px 60px 360px 60px;
  .nav_bar {
    background: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/04/25/da9e8a0e35e424fa5ea73657b9b08d0e.png")
      no-repeat;
    background-attachment: local;
    background-size: cover;
    background-position: center;
    /deep/.van-nav-bar__title {
      color: #fff;
    }
    .btns {
      display: flex;
      align-items: center;
      .btn_1 {
        width: 62px;
        height: 62px;
        margin: 0 35px 0 0;
      }
      .btn_2 {
        width: 62px;
        height: 62px;
      }
    }
  }
  /deep/ .van-hairline--bottom::after {
    border: unset;
  }
  .vip_type {
    margin-top: 50px;
    position: relative;
    .vip_item {
      width: 100%;
      height: 565px;
      background: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/07/30/dba3ea5e68d65a5be47ec4d5bb1f2ebf.png")
        no-repeat;
      background-size: 100% 100%;
      background-position: center;
      border-radius: 20px;
      padding: 70px;
      .top {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .vip_name {
          font-size: 84px;
          color: #53290b;
          font-weight: bold;
          letter-spacing: 10px;
          font-family: yixindianfenghei;
        }
        .rule {
          font-size: 37px;
          color: #53290b;
        }
      }
      .text_1 {
        padding: 0 0 20px 0;
        font-size: 42px;
        span {
          font-size: 50px;
          color: #53290b;
        }
      }
      .discount {
        padding: 10px 40px;
        background: #eabe97;
        border-radius: 999px;
        display: flex;
        align-items: center;
        max-width: 500px;
        margin-top: 25px;
        // justify-content: space-between;
        .icon {
          width: 49px;
          height: 49px;
          margin-right: 15px;
        }
        .text_2 {
          font-size: 32px;
          color: #53290b;
          display: flex;
          align-items: baseline;
          .num_2 {
            font-size: 41px;
            margin-left: 10px;
          }
        }
      }
      .price {
        display: flex;
        align-items: baseline;
        margin-top: 25px;
        color: #53290b;
        .text_3 {
          font-size: 60px;
          font-weight: bold;
          margin-right: 20px;
        }
        .price_num {
          font-size: 85px;
          font-weight: bold;
          letter-spacing: 6px;
        }
      }
    }
    .isVip {
      background-image: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/08/08/98be476d7dc3c4586664c1223d464bd4.png");
      height: 500px;
      position: relative;
      .user_info {
        display: flex;
        align-items: center;
        .avatar {
          position: relative;
          .vip_tag {
            position: absolute;
            bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 42px;
            padding: 0 40px;
            font-size: 32px;
            color: #3c3c3c;
            background: #ddb183;
            line-height: 100%;
            border-radius: 21px;
          }
        }
        .user_name {
          margin-left: 60px;
          font-size: 67px;
          color: #3c3c3c;
        }
      }
      .vip_time {
        position: absolute;
        bottom: 30px;
        font-weight: bold;
        font-size: 42px;
        color: #3c3c3c;
      }
    }
    .mask {
      position: absolute;
      bottom: -150px;
      left: -60px;
      right: -60px;
      height: 383px;
      background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/66ce48555fd640afa9c1bbed9285d432.png")
        no-repeat;
      background-size: contain;
      background-position: top center;
    }
  }
  .vip_power {
    padding-top: 120px;
    .power_title {
      font-size: 56px;
      color: #fff;
      font-weight: bold;
      text-align: center;
    }
    .power_icon {
      padding: 25px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      &_item {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        margin: 20px 25px;
        .pic {
          height: 128px;
          width: 128px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to bottom, #ca9c79, #fbe8d7);
          .pic_icon {
            width: 74px;
            height: 74px;
          }
        }
        .label {
          font-size: 34px;
          color: #fde8d6;
          margin-top: 20px;
          white-space: nowrap;
        }
        .disable {
          color: transparent;
        }
      }
    }
  }
  .choujiang {
    padding-top: 60px;
    .t2 {
      letter-spacing: 3px;
    }
    .choujiang_box {
      margin-top: 30px;
      width: 100%;
      aspect-ratio: 1;
      background-image: url("@/assets/icon/vip/cjbg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .wheel_content {
        width: 100%;
        height: 100%;
        padding: 140px;
      }
    }
    .roules {
      margin-top: 30px;
      padding: 20px 90px 0 90px;
      &_title {
        font-size: 47px;
        color: #fff;
      }
      p {
        font-size: 36px;
        color: #fae4d0;
        text-align: justify;
        padding: 5px 0;
        letter-spacing: 1px;
      }
      .first_p {
        margin-top: 30px;
      }
    }
  }
  .store {
    margin-top: 30px;
    margin-left: -60px;
    margin-right: -60px;
    padding: 60px;
    background: #fff0e3;
    border-radius: 30px 30px 0 0;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        font-size: 52px;
      }
      .all {
        font-size: 40px;
        color: #4c4c4c;
      }
    }
    .list {
      margin-top: 40px;
      padding-top: 20px;
      padding-bottom: 100px;
      background: #fff;
      border-radius: 30px 30px 0 0;
    }
  }
  .bottom {
    position: fixed;
    bottom: 150px;
    left: 0;
    right: 0;
    height: 300px;
    background: #fdead9;
    border-radius: 100px 100px 0 0;
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.3);
    padding: 60px 70px 35px 70px;
    .btn_outside {
      width: 100%;
      height: 150px;
      background: #b58f70;
      border-radius: 75px;
      .btn_inside {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #d8a75f, #f8d7a8);
        border-radius: 75px;
        transform: translateY(-15px);
        display: flex;
        align-items: center;
        .left {
          width: 60%;
          height: 100%;
          border-radius: 75px 0 150px 75px;
          background: linear-gradient(to bottom, #010000, #71350a);
          text-align: center;
          line-height: 1;
          .text_1 {
            font-size: 60px;
            color: #f8ddc5;
            font-weight: bold;
          }
          .text_2 {
            font-size: 80px;
            color: #f8ddc5;
            font-weight: bold;
          }
        }
        .right {
          width: 40%;
          height: 100%;
          text-align: center;
          line-height: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .text_3 {
            font-size: 60px;
            color: #432006;
            font-weight: bold;
          }
        }
      }
    }
  }
  .rules_content {
    width: 100%;
    height: 80vh;
    position: relative;
    .close {
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
      font-size: 18px;
    }
    .rules_imgs {
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        font-size: 0;
        line-height: 1;
      }
    }
  }
  /deep/ .van-dialog {
    background: transparent;
    .pic {
      position: relative;
      .gift_result {
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translateX(-50%);
        p {
          font-size: 65px;
          color: #b31801;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
  /deep/ .van-field {
    padding: 0;
    .van-field__control {
      font-size: 32px;
      color: #fae4d0;
      text-align: justify;
      letter-spacing: 1px;
    }
    background: transparent;
  }
}
</style>
